<template>
  <div class="productInfo-box">
    <el-form ref="ruleFormRef" :model="form" label-width="120px">
      <el-form-item label="属性类型：">
        <el-select
          v-model="form.productAttributeCategoryId"
          placeholder="请选择品牌"
        >
          <el-option
            v-for="item in option2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="商品规格：">
        <el-card class="box-card"> </el-card>
        <el-table
          :data="form.skuStockList"
          style="width: 100%; margin-top: 20px"
          empty-text="暂无数据"
          border
        >
          <el-table-column prop="price" label="销售价格" />
          <el-table-column prop="stock" label="商品库存" />
          <el-table-column prop="lowStock" label="库存预警值" />
          <el-table-column prop="id" label="SKU编号" />
          <el-table-column label="操作" />
        </el-table>
        <el-button type="primary">刷新列表</el-button>
        <el-button type="primary">同步价格</el-button>
        <el-button type="primary">同步库存</el-button>
      </el-form-item>
      <el-form-item label="商品参数：">
        <el-card class="box-card"> </el-card>
      </el-form-item>
      <el-form-item label="商品相册：" prop="usePointLimit">
        <el-upload
          v-model:file-list="fileList"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="规格参数：">
        <el-radio-group v-model="detailType" label="0" size="small">
          <el-radio-button :label="0">电脑端详情</el-radio-button>
          <el-radio-button :label="1">移动端详情</el-radio-button>
        </el-radio-group>

        <main id="pcsample" v-show="detailType === 0">
          <el-button class="el-btn" type="primary">上传图片</el-button>
          <Editor
            api-key="no-api-key"
            v-model="form.detailHtml"
            :init="tinymce"
          />
        </main>
        <main id="mobilesample" v-show="detailType === 1">
          <el-button class="el-btn" type="primary">上传图片</el-button>
          <Editor
            api-key="no-api-key"
            v-model="form.detailMobileHtml"
            :init="tinymce"
          />
        </main>
      </el-form-item>
      <el-form-item>
        <el-button @click="active = 1"> 上一步，填写商品促销 </el-button>

        <el-button type="primary" @click="submitForm(ruleFormRef)">
          下一步，填写商品关联
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, inject } from "vue";
import { ElMessage, FormInstance, UploadProps } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { productAttributeApi } from "../api/api";
import Editor from "@tinymce/tinymce-vue";

const active = inject<any>("active");
const all = inject<any>("all");

productAttributeApi({ pageNum: 1, pageSize: 100 }).then((res) => {
  if (res.code == 200) {
    option2.value = res.data.list.map((item: { id: any; name: any }) => ({
      value: item.id,
      label: item.name,
    }));
  }
});

const option2 = ref<any>([]); // 商品属性数据

const tinymce = {
  selector: "textarea",
  width: 600,
  height: 500,
  menubar: false,
  language: "zh_CN",
  plugins: [
    "anchor",
    "fullscreen",
    "image",
    "link",
    "media",
    "table",
    "insertdatetime",
  ],
  toolbar1:
    "  bold italic underline strikethrough  alignleft  alignright   outdent indent blockquote  undo redo removeformat code  ",
  toolbar2:
    "hr bullist numlist link  image preview anchor fullscreen insertdatetime media table forecolor backcolor",
};
const detailType = ref(0);
const ruleFormRef = ref<FormInstance>();
const fileList = ref<any>([]); // 商品相册
const form = reactive<any>({
  productAttributeCategoryId: null, // 属性类型id
  skuStockList: [], // 商品的sku库存信息
  albumPics: "", // 画册图片
  detailHtml: "", // 产品详情网页内容
  detailMobileHtml: "", // 移动端网页详情
});

const handleRemove: UploadProps["onRemove"] = () => {
  const str = fileList.map((item: { url: any }) => item.url).join(",");
  var reg1 = new RegExp("blob:", "g"); // 加'g'，删除字符串里所有的"a"
  var a1 = str.replace(reg1, "");
  form.albumPics = a1;
};

const handlePictureCardPreview: UploadProps["onPreview"] = () => {
  const str = fileList.map((item: { url: any }) => item.url).join(",");
  var reg1 = new RegExp("blob:", "g"); // 加'g'，删除字符串里所有的"a"
  var a1 = str.replace(reg1, "");
  form.albumPics = a1;
};

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      active.value = 3;
      Object.assign(all, form);
    } else {
      ElMessage.error("验证失败");
    }
  });
};
</script>

<style lang="less" scoped>
.productProperties-box {
  padding: 20px;
  margin-right: 80px;
}

:deep(.el-card) {
  width: 100%;
  background-color: #f8f9fc;
}
.el-btn {
  position: absolute;
  right: 10px;
  top: 40px;
  z-index: 999;
}
</style>
